// material-ui
import PropTypes from 'prop-types';
import { Card, CardContent, Grid, Typography } from '@mui/material';
import Skeleton from '@mui/material/Skeleton';

const EarningCard = ({ isLoading, amount, title }) => {
  if (isLoading) {
    return (
      <Card>
        <CardContent>
          <Grid container direction="column">
            <Grid item>
              <Grid container justifyContent="space-between">
                <Grid item>
                  <Skeleton variant="rectangular" width={44} height={44} />
                </Grid>
                <Grid item>
                  <Skeleton variant="rectangular" width={34} height={34} />
                </Grid>
              </Grid>
            </Grid>
            <Grid item>
              <Skeleton variant="rectangular" sx={{ my: 2 }} height={40} />
            </Grid>
            <Grid item>
              <Skeleton variant="rectangular" height={30} />
            </Grid>
          </Grid>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card>
      <CardContent>
        {/* 使用 props 中的数据渲染卡片内容 */}
        <Typography>{amount}</Typography>
        <Typography>{title}</Typography>
      </CardContent>
    </Card>
  );
};

EarningCard.propTypes = {
  isLoading: PropTypes.bool.isRequired,
  amount: PropTypes.number.isRequired,
  title: PropTypes.string.isRequired
};

export default EarningCard;
